<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字符串方法</title>
</head>
<body>
  <script>
    var text="Hello world!"
    //anchor 
    // 使字符串变成带有name属性的a标签
    document.write(text.anchor("anchor"),"---anchor<br/><br/>")
    // console.log(text.anchor("anchor"),"---anchor") //<a name="anchor">Hello world!</a>

    //small
    // "Hello world!" 将被显示为小号字体
    document.write(text.small(),"---small<br/><br/>")
    // console.log(text.small(),"---small") // <small>Hello world!</small>

    //big
    // "Hello world!" 将被显示为大号字体
    document.write(text.big(),"---big<br/><br/>")
    // console.log(text.big(),"---big") // <big>Hello world!</big>

    //blink
    // 方法用于显示闪动的字符串。实现原理为套一个blink标签，但是blink标签已经废弃。该标签的作用为让文字闪动
    document.write(text.blink(),"---blink<br/><br/>")
    // console.log(text.blink(),"---blink") // <blink>Hello world!</blink>

    //bold
    //用于把字符串显示为粗体。
    document.write(text.bold(),"---bold<br/><br/>")
    // console.log(text.bold(),"---bold") // <b>Hello world!</b>

    //fixed()
    //把字符串显示为打字机字体。
    document.write(text.fixed(),"---fixed<br/><br/>")
    // console.log(text.fixed(),"---fixed") // <tt>Hello world!</tt>

    //fontcolor()
    //用于按照指定的颜色来显示字符串。
    document.write(text.fontcolor("Red"),"---fontcolor('Red')<br/><br/>")
    // console.log(text.fontcolor("Red"),"---fontcolor('Red')") // <font color="Red">Hello world!</font>
  
    //italics()
    //用于把字符串显示为斜体。
    document.write(text.italics(),"---italics()<br/><br/>")
    // console.log(text.italics(),"---italics()") // <i>Hello world!</i>

    //fontsize()
    //用于按照指定的尺寸来显示字符串。
    document.write(text.fontsize(5),"---fontsize(5)<br/><br/>")
    // console.log(text.fontsize(5),"---fontsize(5)") // <font size="5">Hello world!</font>

    //link()
    //用于把字符串显示为超链接。
    document.write(text.link('https://www.baidu.com'),"---link('https://www.baidu.com')<br/><br/>")
    // console.log(text.link('https://www.baidu.com'),"---link('https://www.baidu.com')") //<a href="https://www.baidu.com">Hello world!</a>
    
    //sup()
    //把字符串显示为上标
    document.write(text.sup(),"---sup()<br/><br/>")
    // console.log(text.sup(),"---sup()") //<sup>Hello world!</sup>

    //sub()
    //把字符串显示为下标
    document.write(text.sub(),"---sub()<br/><br/>")
    // console.log(text.sub(),"---sub()") //<sub>Hello world!</sub>

    //strike()
    //用于显示加删除线的字符串
    document.write(text.strike(),"---strike()<br/><br/>")
    // console.log(text.strike(),"---strike()") //<strike>Hello world!</strike> 
    
    //-----------------------------------

    //charCodeAt()
    //返回字符串指定位置的 Unicode 编码 最大支持2个字节）
    console.log(text.charCodeAt(6),'---charCodeAt(6)') //119
    console.log(text.charCodeAt(0),'---charCodeAt(0)') //72

    //codePointAt() 类似charCodeAt的加强版？
    //方法返回 一个 Unicode 编码点值的非负整数（最大支持4个字节）。
    console.log(text.codePointAt(6),'---codePointAt(6)') //119
    console.log(text.codePointAt(0),'---codePointAt(0)') //72

    //normalize()
    // 按照指定的一种 Unicode 正规形式将当前字符串正规化. 编码化~
    // "NFC", "NFD", "NFKC", 以及 "NFKD" 其中的一个, 默认值为 "NFC".
    console.log(text.normalize("NFC"),'---normalize("NFC")')
    console.log(text.normalize("NFKD"),'---normalize("NFKD")')

    //toString()
    //方法返回指定对象的字符串形式。
    //String对象覆盖了Object对象的 toString方法；并没有继承Object.toString()。对于String对象，toString方法返回该对象的字符串形式，和String.prototype.valueOf()方法返回值一样。
    console.log(text.toString(),"---toString()") //Hello world!
    
    //valueOf()
    //方法返回一个String对象的原始值
    //String 对象的 valueOf 方法返回一个String对象的原始值。该值等同于String.prototype.toString()。
    // 该方法通常在 JavaScript 内部被调用，而不是在代码里显示调用。
    console.log(text.valueOf(),"---valueOf()") //Hello world!


    //----------------------------------

    //trim()
    //方法会从一个字符串的两端删除空白字符。
    var str = '   str   '
    console.log(str.trim(),"---trim()") //str

    //trimStart()
    //方法会从一个字符串的开始删除空白字符。
    console.log(str.trimStart(),"---trimStart()") //'str   '

    //trimLeft()
    //方法会从一个字符串的左边删除空白字符。等同于trimStart
    console.log(str.trimLeft(),"---trimLeft()") //'str   '   

    //trimEnd()
    //方法会从一个字符串的结尾删除空白字符。
    console.log(str.trimEnd(),"---trimEnd()") //'   str'

    //trimRight()
    //方法会从一个字符串的右边删除空白字符。等同于trimEnd
    console.log(str.trimRight(),"---trimRight()") //'   str'

    //toUpperCase()
    //所有字母转大写
    console.log(text.toUpperCase(),"---toUpperCase()") //HELLO WORLD!

    //toLowerCase()
    //所有字母转小写
    console.log(text.toLowerCase(),"---toLowerCase()") //hello world!

    //toLocaleUpperCase()
    //使用本地化（locale-specific）的大小写映射规则将输入的字符串转化成大写形式并返回结果字符串。
    console.log(text.toLocaleUpperCase(),"---toLocaleUpperCase()") //HELLO WORLD!

    //toLocaleLowerCase()
    //使用本地化（locale-specific）的大小写映射规则将输入的字符串转化成小写形式并返回结果字符串。
    console.log(text.toLocaleLowerCase(),"---toLocaleLowerCase()") //hello world!


    //------------------------

    //charAt() 
    //方法可返回指定位置的字符。
    console.log(text.charAt(6),'---charAt(6)') //w
    console.log(text.charAt(0),'---charAt(0)') //h

    //startsWith(searchString,position)
    // 入参 : searchString指定字符串 position开始位置(不传默认0)
    //确定字符串是否以指定字符串的字符开头。区分大小写
    console.log(text.startsWith('H'),'---startsWith("h")') //true
    console.log(text.startsWith('d'),'---startsWith("d")') //false

    //endsWith(searchString,position)
    // 入参 : searchString指定字符串 position结束位置(不传默认length)
    //确定字符串是否以指定字符串的字符结尾。区分大小写
    console.log(text.endsWith('d!'),'---endsWith("d!")') //true
    console.log(text.endsWith('d'),'---endsWith("d")') //false

    //concat()
    // 连接字符串
    console.log(text.concat('concat'),'---concat("concat")') //Hello world!concat
  
    //includes()
    //判断字符串是否包含指定的子字符串。
    console.log(text.includes('w'),'---includes("w")') //true 
    console.log(text.includes('a'),'---includes("a")') //false
    
    //indexOf()
    //返回某个指定的字符串值在字符串中"首次"出现的位置。
    //如果指定第二个参数 start，则在一个字符串中的指定位置从前向后搜索。
    //没有返回-1
    console.log(text.indexOf('l'),'---indexOf("l")') //2 
    console.log(text.indexOf('a'),'---indexOf("a")') //-1 

    //lastIndexOf() 
    // 方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索。
    // 该方法将从后向前检索字符串，但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
    // 开始检索的位置在字符串的 start 处或字符串的结尾（没有指定 start 时）。
    // 如果没有找到匹配字符串则返回 -1 。
    console.log(text.lastIndexOf('l'),'---lastIndexOf("l")') //9 
    console.log(text.lastIndexOf('l',5),'---lastIndexOf("l",5)') //3 
    console.log(text.lastIndexOf('a'),'---lastIndexOf("a")') //-1 

    // localeCompare() 返回 -1 0 1
    //（比较两个字符串，考虑了默认的本地排序规则），使用的本地规则有汉字和英语的，
    //例子中用的是英语，则是根据字母排序的。如果有用到汉字则是根据汉字拼音来排序。
    console.log('a'.localeCompare('b'),'---"a".localeCompare("b")') // -1 
    console.log('啊'.localeCompare('巴'),'---"啊".localeCompare("巴")') // -1 a 比 b 在前 汉字先比首位
    console.log('啊'.localeCompare('阿'),'---"啊".localeCompare("阿")') // 1 同音字有待考证 
  
    // match()
    // 在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 需要new RegExp
    console.log(JSON.stringify(text.match(new RegExp(/l/g))),'---match(new RegExp(/l/g))') //["l","l","l"]
    console.log(JSON.stringify(text.match(new RegExp(/l/))),'---match(new RegExp(/l/))') //["l"]
  
    //matchAll()
    //返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。传入的正则必须有/g
    var matchAll = text.matchAll(new RegExp(/l/g))
    console.log(text.matchAll(new RegExp(/l/g)),'---matchAll(new RegExp(/l/g))') //RegExpStringIterator
    // console.log(matchAll.next()) // index,2
    // console.log(matchAll.next()) // index,3
    // console.log(matchAll.next()) // index,9
    // console.log(matchAll.next()) // undefined
    
    //padStart()
    //方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。
    console.log(text.padStart(16,"NFC"),'---padStart("NFC")') //NFCNHello world!
    // 传入的数字小于text的长度则返回text
    console.log(text.padStart(5,"NFC"),'---padStart("NFC")') //Hello world!

    //padEnd()
    //与padStart相同，区别为在字符串的末尾填充

    //repeat()
    //构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
    // 入参不可为负数，不可大于最长字符串
    console.log(text.repeat(2),'---repeat(2)') //Hello world!Hello world!
    // 小数向下取整
    console.log(text.repeat(3.5),'---repeat(2.5)') //Hello world!Hello world!
  
    //replace
    //方法返回一个由替换值替换一些或所有匹配的模式后的新字符串。
    //模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数。
    console.log(text.replace(/l/g,'a'),"---replace(/l/g,'a')") //Heaao worad!

    //replaceAll
    //传入的正则必须有/g 意为全部替换
    console.log(text.replaceAll(/l/g,'a'),"---replaceAll(/l/g,'a')") //Heaao worad!

    //search() 
    //执行正则表达式和 String对象之间的一个搜索匹配。
    //如果匹配成功，则 search() 返回正则表达式在字符串中首次匹配项的索引。否则，返回 -1。
    console.log(text.search(/l/),"---search(/l/)") //2
    console.log(text.search(/a/),"---search(/a/)") //-1

    //split()
    //使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。 
    //返回数组
    console.log(text.split(''),"---split('')") //["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
    console.log(text.split('l'),"---split('')") //["He", "", "o wor", "d!"]

    //substr(start,length)
    //start 开始位置 length 要截取的长度
    //返回一个字符串中从指定位置开始到指定字符数的字符。
    console.log(text.substr(4,5),"---substr(4,5)") //o wor
    //负值为 length + 负值 不够则到最后
    console.log(text.substr(-4,5),"---substr(4,5)") //rld! 
    
    //slice(beginSlice,endSlice)
    //提取一个字符串的一部分，并返回一新的字符串。
    // beginSlice从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 sourceLength + beginSlice 看待，这里的sourceLength 是字符串的长度 (例如， 如果beginSlice 是 -3 则看作是: sourceLength - 3)
    // endSlice可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice会一直提取到字符串末尾。如果该参数为负数，则被看作是 sourceLength + endSlice，这里的 sourceLength 就是字符串的长度(例如，如果 endSlice 是 -3，则是, sourceLength - 3)。
    console.log(text.slice(2,5),"---slice(2,5)") //llo
    console.log(text.slice(2),"---slice(2)") //llo world!
    console.log(text.slice(-2),"---slice(-2)") //d!
    console.log(text.slice(-2,-5),"---slice(-2,-5)") //'' 未形成闭环
    console.log(text.slice(5,2),"---slice(5,2)") //'' 未形成闭环

    //substring(start,end)
    //start 开始位置 end结束位置
    //返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。
    console.log(text.substring(4,5),"---substr(4,5)") //o
    //负值全部转化为 0
    //如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。例如，str.substring(1, 0) == str.substring(0, 1)。
    console.log(text.substring(-4,5),"---substr(4,5)") //Hello

    //substring 和 slice 的
    //共同点 都是接收2个入参 开始和结束位置(截取时不包括结束位置)
    // 不同点
    // 入参为负数时  substring直接转化为0  slice会和length折算
    // 入参为start大于end时(负数时slice为和length折算后的结束)  substring会置换位置截取  slice会返回''
 </script>
</body>
</html>